
.layers-management {
    width: 380px;
    min-height: 142px;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0 , .25);
    background-color: white;
    display: flex;
    flex-direction: column;
    transition: all .3s;
    .layers-management-header {
        flex: 0 0 33px;
        padding: 0 10px;
        height: 33px;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
        line-height: 33px;
        color: black;
        &:first-child {
            border-top: 0;
        }
    }
    .layers-management-body {
        flex: 0 0 1;
        overflow: hidden;
        overflow-y: auto;
        padding: 6px 10px;
        .layer-item {
            margin-top: 5px;
            &:first-child {
                margin-top: 0;
            }
        }
    }
    .layers-management-bottom {
        flex: 0 0 52px;
        padding: 10px;
        height: 52px;
        border-top: 1px solid #e5e5e5;
        button {
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
}


.layer-menu-container {
    min-width: 100px;
    position: relative;
    padding: 0;
    margin: 0;
    text-align: left;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    background-clip: padding-box;
    .layer-menu-item {
        padding: 7px 12px;
        margin: 0;
        clear: both;
        font-size: 12px;
        font-weight: 400;
        color: rgba(0,0,0,.65);
        white-space: nowrap;
        cursor: pointer;
        transition: all .3s;
        &:first-child {
            border-radius: 4px 4px 0 0;
        }
        &:last-child {
            border-radius: 0 0 4px 4px;
        }
        &:hover {
            background-color: #ecf6fd;
        }
        &.layer-menu-item-danger {
            color: #f5222d;
        }
        &.layer-menu-item-disabled,
        &.layer-menu-item-disabled:hover {
            color: rgba(0, 0, 0, .25);
            background-color: #fff;
            cursor: not-allowed;
        }
    }
    
    .layer-menu-divider {
        height: 1px;
        overflow: hidden;
        background-color: #e9e9e9;
        line-height: 0;
    }
}



// .layers {
//     width: 380px;
//     border-radius: 4px;
//     box-shadow: 0 0 6px rgba(0, 0, 0 , .25);
//     background-color: white;
//     .layers-management {
//         border-bottom: 1px solid #e5e5e5;
//         .layers-management-header {
//             padding: 0 10px;
//             height: 33px;
//             border-bottom: 1px solid #e5e5e5;
//             font-size: 14px;
//             line-height: 33px;
//             color: black;
//         }
//         .layers-management-body {
//             overflow: hidden;
//             overflow-y: auto;
//             padding: 6px 10px;
//             .layer-item {
//                 margin-top: 5px;
//                 &:first-child {
//                     margin-top: 0;
//                 }
//             }
//         }
//     }
//     .layers-management-bottom {
//         padding: 10px;
//         height: 52px;
//         button {
//             margin-right: 10px;
//             &:last-child {
//                 margin-right: 0;
//             }
//         }
//     }
// }


// .layer-menu-container {
//     min-width: 100px;
//     position: relative;
//     padding: 0;
//     margin: 0;
//     text-align: left;
//     background-color: #fff;
//     border-radius: 4px;
//     box-shadow: 0 1px 6px rgba(0,0,0,.2);
//     background-clip: padding-box;
//     .layer-menu-item {
//         padding: 7px 12px;
//         margin: 0;
//         clear: both;
//         font-size: 12px;
//         font-weight: 400;
//         color: rgba(0,0,0,.65);
//         white-space: nowrap;
//         cursor: pointer;
//         transition: all .3s;
//         &:first-child {
//             border-radius: 4px 4px 0 0;
//         }
//         &:last-child {
//             border-radius: 0 0 4px 4px;
//         }
//         &:hover {
//             background-color: #ecf6fd;
//         }
//         &.layer-menu-item-danger {
//             color: #f5222d;
//         }
//         &.layer-menu-item-disabled,
//         &.layer-menu-item-disabled:hover {
//             color: rgba(0, 0, 0, .25);
//             background-color: #fff;
//             cursor: not-allowed;
//         }
//     }
    
//     .layer-menu-divider {
//         height: 1px;
//         overflow: hidden;
//         background-color: #e9e9e9;
//         line-height: 0;
//     }
// }